<template>
  <view>
    <uni-nav-bar title="共产星球" :statusBar="true" color="#ffffff" :border="false" backgroundColor="var(--mainColor)"></uni-nav-bar>
    <mescroll-body  ref="mescrollRef" :bottombar="false" :down="downOption" @init="mescrollInit" @down="downCallback" @up="upCallback">
      <view class="top" :style="{ background: 'url('+$_BASE_IMG_API+'/images/indexbg.png)  no-repeat','background-size': '100% 100%'}">
        <u-sticky bg-color="var(--mainColor)" h5-nav-height="0" @fixed="isFixed=true"  @unfixed="isFixed=false">
          <!-- #ifdef MP-WEIXIN -->
          <view v-if="isFixed" style="background-color: var(--mainColor)">
            <view :style="{ height: statusBarHeight+'px' }"></view>
            <view class="font-14 text-center" style="color:#ffffff; height:44px; width:100%; line-height:44px;">共产星球</view>
          </view>
          <!-- #endif -->
          <view class="u-p-x-30 u-p-y-20" style="background-color: var(--mainColor);" @click="tosearchPage">
            <u-search :showAction="false" style="pointer-events: none"></u-search>
          </view>
        </u-sticky>
        <!-- 轮播图 -->
        <view class="mx-3">
          <dy-swiper :list="bannerList"></dy-swiper>
        </view>
      </view>
      <!-- 首页分类 和公告 -->
      <view class="u-m-20 u-m-t-50 box-shadow rounded-20 bg-white overflow-hidden">
				<u-grid :col="5" :border="false">
					<u-grid-item v-for="(item,index) in categoryList" :key="index" @click="toGoodsList(item.id, item.name)">
						<image :src="item.image" style="width: 90rpx;height: 90rpx;" mode="aspectFill"></image>
						<text class="mt-1 text-center text-ellipsis" style="width: 100rpx;">{{item.name}}</text>
					</u-grid-item>
				</u-grid>
				<view class="u-m-x-20 border-bottom"></view>
				<view class="flex align-center justify-between ">
				  <view class="" style="width: 540rpx;">
				    <u-notice-bar mode="vertical" type="none" :list="noticList"></u-notice-bar>
				  </view>
				  <view class="flex align-center u-m-r-10" @click="noticClick">
				    <text class="mx-1 pl-2 border-left-2 lineH-1" style="color: #0090FF;">更多</text>
				    <uni-icons size="16" color="#afafaf" type="arrowright" style="vertical-align: middle;"></uni-icons>
				  </view>
				</view>
      </view>
      <!-- 活动图片 -->
      <!-- <view class="flex align-center justify-center u-m-b-20" @click="toDraw">
        <image :src="$_BASE_IMG_API+'/images/choujiang.png'" style="width: 700rpx;height: 177rpx;" mode="aspectFill"></image>
      </view> -->
			<!-- 秒杀-->
			<!-- <view class="u-m-b-20">
				<index-seckill ref="seckill"></index-seckill>
			</view> -->
      <!-- 今日必拼-->
      <!-- <index-group-today ref="group"></index-group-today> -->
       <!-- 商品专区-->
      <index-group-today ref="goods" type="goods"></index-group-today>
      <!-- 精选好物 -->
      <view class="u-p-x-30">
        <view class="flex align-center justify-center u-m-y-40">
          <image src="/static/index/index_good_goods.png" style="width: 260rpx;height: 37rpx;" mode="aspectFill"></image>
        </view>
        <view class="flex flex-wrap justify-between">
          <block v-for="(item,index) in goodsList" :key="index">
            <dy-goods-item :item="item"></dy-goods-item>
          </block>
        </view>
      </view>
    </mescroll-body>
    <u-tabbar v-model="current" :list="list" @change="tabbarChange" active-color="#fe582b" inactive-color="#999999"></u-tabbar>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import { BaseCenterApi, HomeCenterApi } from '@/api/serves.js'
  import {licenseSubscription} from "@/common/utils/utils"
  export default {
    mixins: [MescrollMixin], // 使用mixin
    data() { 
      return {
				list: [{
						iconPath: "/static/tabbar/index.png",
						selectedIconPath: "/static/tabbar/index-active.png",
						text: '首页',
            pagePath: "/pages/tabbar/index/index"
					},
					{
						iconPath: "/static/tabbar/category.png",
						selectedIconPath: "/static/tabbar/category-active.png",
						text: '分类',
            pagePath: "/pages/tabbar/category/category"
					},
          {
						iconPath: "/static/tabbar/supplier.png",
						selectedIconPath: "/static/tabbar/supplier-active.png",
						text: '商圈',
            pagePath: "/pages/tabbar/supplier/supplier"
					},
          {
						iconPath: "/static/tabbar/cart.png",
						selectedIconPath: "/static/tabbar/cart-active.png",
						text: '购物车',
            pagePath: "/pages/tabbar/cart/cart"
					},
          {
						iconPath: "/static/tabbar/mine.png",
						selectedIconPath: "/static/tabbar/mine-active.png",
						text: '我的',
            pagePath: "/pages/tabbar/mine/mine"
					},
				],
				current: 0,
				downOption:{
				  bgColor: 'var(--mainColor)',
					color:'#333'
				},
        isShowSticky: false,
        bannerList: [],
        categoryList: [],
        noticList: [],
        groupList: [],
        goodsList: [],
        statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
        isFixed: false
      }
    },
    onPageScroll(e) {
      this.isShowSticky = e.scrollTop >= 44 ? true : false
    },
    onLoad(options){
      if(options&&options.username&&!uni.getStorageSync("token")){
        uni.setStorageSync("tjid",options.username)
      }
	  
    },onReady() {
    },
    methods: {
      tabbarChange(e){
        if(e==this.current) return
		if(e == 4){
			licenseSubscription() // 微信小程序授权订阅消息弹窗 
		}
        uni.redirectTo({
          url: this.list[e].pagePath
        })
      },
      _initData() {
        // 获取轮播图
        this.getBannerList()
        // 获取公告
        this.getNoticList()
        // 获取分类
        this.getHomeList()
        // 获取今日评团商品
				// this.$refs.group.getGoodsgroup()
        // 商品专场
				this.$refs.goods.getCategoryList()
				// 获取今日秒杀商品
				// this.$refs.seckill.getCalendar()
      },
      // 下拉刷新回掉
      downCallback() {
				this._initData()
				this.mescroll.resetUpScroll() 
      },
      // 上拉加载
      upCallback(page) {
        HomeCenterApi.getTjGoods({page: page.num}).then(res => {
          console.log('获取精选好物', res);
					if(res.code == 1){
						if(page.num == 1) this.goodsList = []; //如果是第一页需手动制空列表
							this.goodsList = this.goodsList.concat(res.data); //追加新数据
							this.mescroll.endByPage(res.data.length, res.totalpage)
					}else {
						this.$toast(res.msg)
						this.mescroll.endErr()
					}
        })
      },
			// 获取轮播图
      getBannerList() {
        BaseCenterApi.getBannerList({}).then(res => {
          // console.log('获取轮播图', res);
          if (res.code == 1) {
            this.bannerList = res.data
          }
        })
      },
      // 获取公告
      getNoticList() {
        BaseCenterApi.getNoticList({}).then(res => {
          console.log('获取公告', res);
          if (res.code == 1) {
            this.noticInfo = res.data
            this.noticList = res.data.map(item => {
              return item.title
            })
          }
        })
      },
      // 获取分类
      getHomeList() {
        HomeCenterApi.getHomeList({}).then(res => {
          console.log('获取分类', res);
          if (res.code == 1) {
            this.categoryList = res.data.data.slice(0,10)
          }
        })
      },
      
      // --------------------------------------点击事件----------------
      // 公告点击
      noticClick(index) {
        console.log(index);
        uni.navigateTo({
          url: '/pages/notic/noticList/noticList'
        })
      },
      // 搜索页面
      tosearchPage() {
        uni.navigateTo({
          url: '/pages/goodsDetail/goodsSearch/goodsSearch'
        })
      },
      // 跳转分类热门商品列表
      toGoodsList(id, name) {
        uni.navigateTo({
          url: '/pages/goodsDetail/goodsListHot/goodsListHot?' + `id=${id}&name=${name}`
        })
      },
			toDraw() {
				uni.navigateTo({
					url:'/pages/index/draw/draw'
				})
			}
    }

  }
</script>

<style lang="scss" scoped>
			/* 隐藏滚动条 */
	::v-deep mescroll-body::-webkit-scrollbar {  
	    display: none;  
	    width: 0 !important;  
	    height: 0 !important;  
	    -webkit-appearance: none;  
	    background: transparent;  
	}
	
	
  .top {
    width: 100%;
    height: 400rpx;
  }
  	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
</style>
